import { Card } from 'antd';

import FormattedMessage from 'umi';
import React from 'react';
import { Bar } from '../../Dashboard/components/Charts';
import styles from '../monitor.less';

const AppNameChart = ({ loading, serverPieData, serverPieTotal }) => (
  <Card
    loading={loading}
    className={styles.salesCard}
    bordered={false}
    title={<FormattedMessage id="monitor.expendTime.appName" defaultMessage="" />}
    style={{
      height: '95%',
    }}
  >
    <div>
      <Bar
        hasLegend
        subTitle={<FormattedMessage id="dashboard.accests.total" defaultMessage="" />}
        total={`${serverPieTotal} 台`}
        data={serverPieData}
        height={248}
        lineWidth={4}
      />
    </div>
  </Card>
);

export default AppNameChart;
